{% extends "base.html" %}

{% block title %}安全中心 - 云水禅心居{% endblock %}

{% block extra_head %}
<style>
    .security-container {
        max-width: 900px;
        margin: 2rem auto;
        padding: 0 1rem;
    }
    
    .security-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 1rem;
    }
    
    .security-title {
        font-size: 1.8rem;
        color: var(--text-color);
    }
    
    .security-subtitle {
        color: var(--secondary-color);
        font-size: 1rem;
    }
    
    .back-btn {
        padding: 0.5rem 1rem;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        text-decoration: none;
        transition: background-color 0.3s;
    }
    
    .back-btn:hover {
        background-color: var(--accent-color);
        text-decoration: none;
    }
    
    .login-history {
        background-color: var(--card-bg);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        overflow: hidden;
        box-shadow: var(--box-shadow);
    }
    
    .table-header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 1rem;
        background-color: var(--primary-color);
        color: white;
        font-weight: bold;
    }
    
    .table-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .table-row:last-child {
        border-bottom: none;
    }
    
    .table-row:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.03);
    }
    
    .login-time {
        color: var(--secondary-color);
    }
    
    .login-ip {
        font-family: 'Courier New', monospace;
    }
    
    .login-location {
        color: var(--accent-color);
    }
    
    .no-records {
        padding: 2rem;
        text-align: center;
        color: var(--secondary-color);
    }
    
    @media (max-width: 768px) {
        .table-header, .table-row {
            grid-template-columns: 1fr;
            gap: 0.5rem;
        }
        
        .table-header {
            display: none;
        }
        
        .table-row {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
        
        .login-ip::before {
            content: "IP: ";
            font-weight: bold;
        }
        
        .login-time::before {
            content: "时间: ";
            font-weight: bold;
        }
        
        .login-location::before {
            content: "位置: ";
            font-weight: bold;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="security-container">
    <div class="security-header">
        <div>
            <h1 class="security-title">账户安全中心</h1>
            <p class="security-subtitle">查看您的账户登录历史记录</p>
        </div>
        <a href="{{ url_for('profile') }}" class="back-btn">返回个人中心</a>
    </div>
    
    <div class="login-history">
        <div class="table-header">
            <div>登录时间</div>
            <div>IP地址</div>
            <div>登录位置</div>
        </div>
        
        {% if login_history %}
            {% for record in login_history %}
                <div class="table-row">
                    <div class="login-time">{{ record.login_time.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                    <div class="login-ip">{{ record.ip_address }}</div>
                    <div class="login-location">{{ record.location or "未知位置" }}</div>
                </div>
            {% endfor %}
        {% else %}
            <div class="no-records">暂无登录记录</div>
        {% endif %}
    </div>
</div>
{% endblock %} 